<template>
    <div class="credit-service">
      <div class="banner container-fuild text-center">发布债权</div>
      <div class="container">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="债权线索" name="first"></el-tab-pane>
          <el-tab-pane label="债权交易" name="second"></el-tab-pane>
        </el-tabs>
        <div class="step-container">
          <el-steps :active="1" align-center>
            <el-step title="" description="信息提交成功"></el-step>
            <el-step title="" description="审核通过"></el-step>
          </el-steps>
        </div>
        <div class="form-container">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="债权人名称">
              <el-input v-model="form.name" placeholder="请输入债权人"></el-input>
            </el-form-item>
            <el-form-item label="债权编码">
              <el-input v-model="form.code" placeholder="请输入债权编码"></el-input>
            </el-form-item>
            <el-form-item label="债权金额">
              <el-input v-model="form.money" placeholder="请输入债权金额"></el-input>
            </el-form-item>
            <el-form-item label="悬赏主体">
              <el-input v-model="form.money" placeholder="请输入悬赏主体"></el-input>
            </el-form-item>
            <el-form-item label="悬赏方式">
              <el-input v-model="form.money" placeholder="请输入悬赏方式"></el-input>
            </el-form-item>
            <el-form-item label="文书齐全">
              <el-input v-model="form.money" placeholder="请输入文书齐全"></el-input>
            </el-form-item>
            <el-form-item label="悬赏金额">
              <el-input v-model="form.money" placeholder="请输入悬赏金额"></el-input>
            </el-form-item>
            <el-form-item label="悬赏类型">
              <el-input v-model="form.money" placeholder="请输入悬赏类型"></el-input>
            </el-form-item>
            <el-form-item label="悬赏人">
              <el-input v-model="form.money" placeholder="请输入悬赏人"></el-input>
            </el-form-item>
            <el-form-item label="悬赏类型">
              <el-input v-model="form.money" placeholder="请输入悬赏类型"></el-input>
            </el-form-item>
            <el-form-item label="地区">
              <el-cascader :options="options">
                <template slot-scope="{ node, data }">
                  <span>{{ data.label }}</span>
                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="form.money" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-model="form.money" placeholder="请输入联系人"></el-input>
            </el-form-item>
            <el-form-item label="详细描述">
              <el-input type="textarea" v-model="form.desc" placeholder="请输入详细描述"></el-input>
            </el-form-item>
            <el-form-item label="证据信息" class="upload-img">
              <span>注：债权信息需进行审批，审批通过后可进行支付</span>
              <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false">
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file" slot-scope="{file}">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url" alt=""
                    >
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in"></i>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                        <i class="el-icon-download"></i>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
</template>
<script>
import { addressOptions } from '../assets/js/address'
export default {
    name: 'PostCredit',
    data(){
        return{
          activeName: 'first',
          form: {
            name: '',
            code: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
          },
          options: addressOptions,
          dialogImageUrl: '',
          dialogVisible: false,
          disabled: false
        }
    },
    methods: {
      handleClick() {

      },
      onSubmit() {
        console.log('submit!');
      },
      handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      }
    },
}
</script>
<style scoped>
.banner {
    color: #fff;
    font-size: 30px;
    height: 300px;
    line-height: 150px;
    background-image: url('../assets/img/banner1.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: center center;
}

/deep/ .el-tabs {
  width: 100%;
  margin-top: -40px;
  background: rgba(255,255,255,0.8);
}
/deep/ .el-tabs__nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
/deep/ .el-tabs__item {
  flex: 1;
  text-align: center;
}
.step-container {
  margin: 30px 0;
}
/deep/ .el-step__main {
  margin: 10px 0;
}
.upload-img {
  margin-bottom: 100px;
}
</style>

